const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
    context: path.resolve(__dirname, '../'),
    mode: 'development',
    devtool: 'cheap-module-source-map',
    entry: {
        // 主页
        index: './src/js/index.js'
    },
    output: {
        filename: 'js/[name]-[chunkhash:8].js',
        path: path.resolve(__dirname, '../dist')
    },
    module: {
        rules: [
            {
                test: /\.styl$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'stylus-loader']
                })
            },
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/,
                include: path.resolve(__dirname, 'src')
            },
            {
                test: /\.(png|jpg|svg)$/,
                use: 'url-loader?limit=8192&name=[path][name]-[hash:8].[ext]'
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('css/[name]-[chunkhash:8].css'),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            title: '图片标记',
            chunks: ['index'],
            template: './index.html',
            publicPath: './'
        })
    ],
    devServer: {
        inline: true,
        progress: true,
        host: '0.0.0.0',
        disableHostCheck: true,
        port: 8081
    }
}